<template>
  <div class="v-note-wrapper markdown-body" :class="[{'fullscreen': s_fullScreen}]">
    <!--工具栏-->
    <div class="v-note-op" :class="{'shadow': boxShadow}" v-show="toolbarsFlag">
      <md-toolbar-left
        ref="toolbar_left"
        :editable="editable"
        :d_words="d_words"
        :d_emoji="d_emoji"
        @toolbar-left-click="toolbarLeftClick"
        @toolbar-left-addlink="toolbarLeftAddlink"
        :toolbars="toolbars"
        @imgAdd="$imgAdd"
        @imgDel="$imgDel"
        @imgTouch="$imgTouch"
        :image_filter="imageFilter" />
      <md-toolbar-right
        ref="toolbar_right"
        :d_words="d_words"
        @toolbar-right-click="toolbarRightClick"
        :toolbars="toolbars"
        :s_subfield="s_subfield"
        :s_preview_switch="s_preview_switch"
        :s_fullScreen="s_fullScreen"
        :s_html_code="s_html_code"
        :s_navigation="s_navigation" />
    </div>

    <!--编辑展示区域-->
    <div class="v-note-panel" :class="{'shadow': boxShadow}">
      <!--编辑区-->
      <div class="v-note-edit divarea-wrapper"
           ref="vNoteEdit"
           @scroll="$v_edit_scroll"
           :class="{
             'scroll-style': s_scrollStyle ,
             'single-edit': !s_preview_switch && !s_html_code ,
             'single-show': (!s_subfield && s_preview_switch) || (!s_subfield && s_html_code)
           }"
           @click="textAreaFocus">
        <div class="content-input-wrapper">
          <autoTextarea class="content-input"
                        ref="vNoteTextarea"
                        :placeholder="placeholder ? placeholder : d_words.start_editor"
                        :fontSize="fontSize"
                        lineHeight="1.5"
                        v-model="d_value"
                        fullHeight />
        </div>
      </div>

      <!--展示区-->
      <div :class="{'single-show': (!s_subfield && s_preview_switch) || (!s_subfield && s_html_code)}"
           v-show="s_preview_switch || s_html_code"
           class="v-note-show">
        <div class="v-show-content"
             ref="vShowContent"
             v-html="d_render"
             v-show="!s_html_code"
             :class="{'scroll-style': s_scrollStyle}">
        </div>
        <div v-show="s_html_code" :class="{'scroll-style': s_scrollStyle}" class="v-show-content-html">
          {{d_render}}
        </div>
      </div>

      <!--标题导航-->
      <transition name="slideTop">
        <div v-show="s_navigation" class="v-note-navigation-wrapper" :class="{'shadow': boxShadow}">
          <div class="v-note-navigation-title" :class="{'shadow': boxShadow}">
            {{d_words.navigation_title}}<i @click="toolbarRightClick('navigation')"
                                           class="fa fa-mavon-times v-note-navigation-close"
                                           aria-hidden="true"></i>
          </div>
          <div ref="navigationContent" class="v-note-navigation-content scroll-style">
          </div>
        </div>
      </transition>
    </div>
    <!--v-note-panel end-->

    <!--帮助文档-->
    <transition name="fade">
      <div ref="help">
        <div @click="toolbarRightClick('help')" class="v-note-help-wrapper" v-if="s_help">
          <div class="v-note-help-content markdown-body" :class="{'shadow': boxShadow}" @click.stop="">
            <i class="fa fa-mavon-times" @click.stop.prevent="toolbarRightClick('help')" aria-hidden="true"></i>
            <div class="scroll-style v-note-help-show" v-html="d_help"></div>
          </div>
        </div>
      </div>
    </transition>

    <!-- 预览图片 -->
    <transition name="fade">
      <div class="v-note-img-wrapper" v-if="d_preview_imgsrc" @click="d_preview_imgsrc=null">
        <img :src="d_preview_imgsrc" alt="none" />
      </div>
    </transition>
    <!--阅读模式-->
    <div :class="{'show': s_readmodel}" class="v-note-read-model scroll-style" ref="vReadModel">
      <div class="v-note-read-content" ref="vNoteReadContent" v-html="d_render"> </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6"  src="./index.js"></script>
